import React, { Component } from 'react';
import { Layout, Menu, Icon } from 'antd';
import { Link } from 'react-router';
import './index.less';

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

export default class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false,
        };
    }

    componentDidMount(){
        console.log(this)        
        console.log(this.props.location.pathname.substr(1))
    }

    render(){
        const data = [
            {
                "name": "首页",
                "url": "/home"
            },
            {
                "name": "商机管理",
                "url": "/inforMation"
            }
        ]
        return(
            <Layout style={{ minHeight: '100vh'}}>
                <Header className="header">
                    <div className="logo" />
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={['0']}
                        style={{ lineHeight: '64px' }}
                    >
                    {data.map((item, i) => {
                        return <Menu.Item key={i}>
                            <Link to={item.url}><span><Icon type="user" />{item.name}</span></Link>
                        </Menu.Item>
                    })}
                </Menu>
                </Header>
                <Layout>
                    {this.props.location.pathname.substr(1) !== 'home' ?
                    <Sider 
                        width={200} 
                        style={{ background: '#fff' }}
                    >
                        <Menu
                            mode="inline"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            style={{ height: '100%', borderRight: 0 }}
                        >
                            <Menu.Item key="sub1">
                                <Icon type="pie-chart" />
                                <span>Option 1</span>
                            </Menu.Item>
                            <Menu.Item key="sub2">
                                <Icon type="desktop" />
                                <span>Option 2</span>
                            </Menu.Item>
                            <Menu.Item key="sub3">
                                <Icon type="inbox" />
                                <span>Option 3</span>
                            </Menu.Item>
                            <SubMenu key="sub4" title={<span><Icon type="user" />subnav 1</span>}>
                                <Menu.Item key="1">option1</Menu.Item>
                                <Menu.Item key="2">option2</Menu.Item>
                                <Menu.Item key="3">option3</Menu.Item>
                                <Menu.Item key="4">option4</Menu.Item>
                            </SubMenu>
                        </Menu>
                    </Sider>:null}
                    <Layout style={{ padding: '24px' }}>
                        <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: '80vh' }}>
                            { this.props.children }
                        </Content>
                        <Footer style={{ textAlign: 'center' }}>
                            Ant Design ©2016 Created by Ant UED
                        </Footer>
                    </Layout>
                </Layout>
            </Layout>
        )
    }
}